<template>
  <div>
    <div class="card" style="margin-bottom: 10px;">你好{{ data.user.name }}！欢迎您使用本系统。</div>
    <div class="card" style="margin-top: 10px; width: 50%" v-if="data.user.role === 'USER'">
      <div style="font-size: 18px; margin-bottom: 20px">系统公告</div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item :timestamp="item.time" color="#0bbd87" placement="top" v-for="item in data.noticeData">
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div v-else>
      <div style="display: flex; grid-gap: 10px">
        <div class="card" style="height: 400px; width: 50%" id="pie"></div>
        <div class="card" style="height: 400px; width: 50%">
          <div style="height: 20px; width: 20%">
            <el-select v-model="selectYear" @change="loadBar">
              <el-option
                  v-for="item in data.salaryDateData"
                  :label="item.year"
                  :value="item.year">
              </el-option>
            </el-select>
          </div>
          <div style="height: 380px" id="bar"></div>
        </div>
      </div>
      <div class="card" style="height: 400px; width: 100%; margin-top: 10px" id="line"></div>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref, onMounted} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import * as echarts from "echarts";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  noticeData: [],
  salaryDateData: []
})

const selectYear = ref()

const loadNotice = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data
      if (data.noticeData.length > 3) {
        data.noticeData = data.noticeData.slice(0, 3)
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadNotice()

const loadSalaryDateData = () => {
  request.get('/salary/selectYear').then(res => {
    if(res.code === '200') {
      data.salaryDateData = res.data
      if (data.salaryDateData.length > 0) {
        // 找出最大的年份
        let maxYear = data.salaryDateData.reduce((prev, current) => {
          return prev.year > current.year ? prev : current;
        }).year;
        selectYear.value = maxYear;
        // 加载对应年份的柱状图数据
        loadBar(maxYear);
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadSalaryDateData()

const loadPie = () => {
  request.get('/echarts/pie').then(res => {
    if (res.code === '200') {
      let chartDom = document.getElementById('pie')
      let myChart = echarts.init(chartDom)
      pieOptions.series[0].data = res.data
      myChart.setOption(pieOptions)
    }
  })
}
const loadBar = (selectYear) => {
  request.get('/echarts/bar/' + selectYear).then(res => {
    if (res.code === '200') {
      let chartDom = document.getElementById('bar')
      let myChart = echarts.init(chartDom)
      barOptions.xAxis.data = res.data.xAxis
      barOptions.series[0].data = res.data.yAxis
      myChart.setOption(barOptions)
    }
  })
}
const loadLine = () => {
  request.get('/echarts/line').then(res => {
    if (res.code === '200') {
      let chartDom = document.getElementById('line')
      let myChart = echarts.init(chartDom)
      lineOptions.xAxis.data = res.data.xAxis
      lineOptions.series[0].data = res.data.yAxis
      myChart.setOption(lineOptions)
    }
  })
}
onMounted(() => {
  loadPie()
  loadLine()
})

// 平滑折线图
let lineOptions = {
  title: {
    text: '部门财务支出折线图',
    subtext: '统计维度：部门',
    left: 'center'
  },
  legend: {
    data: [],
    template:""
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    name: '部门',
    type: 'category'
  },
  yAxis: {
    name: '支出金额',
    type: 'value'
  },
  series: [
    {
      name: '支出金额',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: false,
      markLine: {
        data: [{ type: 'average', name: '支出平均值' }]
      },
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
    },
  ]
};
// 柱状图
let barOptions = {
  title: {
    text: '部门薪资柱状图', // 主标题
    subtext: '统计维度：部门', // 副标题
    left: 'center'
  },
  grid : {   // ---------------------------增加这个属性，bottom就是距离底部的距离
    top: '20%',
    bottom : '20%'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  xAxis: {
    type: 'category',
    name: '部门',
    axisLabel: {
      show: true, // 是否显示刻度标签，默认显示
      interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
      rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
      inside: false, // 刻度标签是否朝内，默认朝外
      margin: 6, // 刻度标签与轴线之间的距离
    },
  },
  yAxis: {
    type: 'value',
    name: '攻略数量',
  },
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'bar',
      itemStyle: {
        normal: {
          color: function () {
            return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
          }
        },
      },
    }
  ]
};
// 饼图
let pieOptions = {
  title: {
    text: '财务支出饼图', // 主标题
    subtext: '统计维度：部门', // 副标题
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数量占比', // 鼠标移上去显示内容
      type: 'pie',
      radius: '50%',
      center: ['50%', '60%']
    }
  ]
}
</script>